<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <title>用工分析</title>

    <link rel="stylesheet" type="text/css" href="/src/css/themes/default.css"/>
    <!-- iview样式 -->
    <link rel="stylesheet" type="text/css" href="/plugins/iview/css/iview.css"/>
    <!--@import url("//unpkg.com/iview/dist/styles/iview.css");-->
    <!--<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>-->
    <!-- 引入layui样式 -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/plugins/popover/popover.css">
    <!--   <script src="//unpkg.com/vue/dist/vue.js"></script>
       <script src="//unpkg.com/iview/dist/iview.min.js"></script>-->
    <!-- 引入vue -->
    <script type="text/javascript" src="/plugins/vue/vue.min.js"></script>
    <!-- iview js -->
    <script type="text/javascript" src="/plugins/iview/js/iview.js"></script>
    <script src="/properties/config.js"></script>
    <!--引入layui.js-->
    <script src="/plugins/layui/layui.js"></script>
    <!--引入axios.js 用于ajax调用-->
    <script src="/plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="/plugins/jquery-1.9.1.min.js"></script>
    <script src="/build/js/appToken.js"></script>
    <script src="/plugins/popover/popover.js"></script>
    <script src="/src/js/wangEditor.js"></script>
    <script src="/src/js/wangEditor.js"></script>
    <script src="/plugins/popover/popover.js"></script>
    
</head>
<body>
<script src="/plugins/layui/extend/modules/echarts/echarts.js"></script>

<!--隐藏元素-->
<!--<p id="staffType"  th:attr="value=${staffType}"  hidden />-->
<!--使用v-cloak技术，在vue渲染完毕前隐藏页面，渲染完成后显示-->
<div id="app" v-cloak>
    <iframe src="#" id="myiframe" scrolling="no" frameborder="0" width="100%" height="800px" ></iframe>
    <!-- <div id="workInfoByMounthDiv">
	</div>
	<div id="salaryInfoByMounthDiv">http://localhost:31501/page/bar.html
	</div> -->
</div>


<script src="/src/js/comm.js"></script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script>
    var layer;
    var table;
    var basePath;
    var vm;
    var tableColum;
    window.layinit(function (htConfig) {
        var _htConfig = htConfig;
        basePath = _htConfig.coreBasePath;
        uiBasePath = _htConfig.uiBasePath;
        document.getElementById("myiframe").src = "/page/bar.html?basePath="+basePath;
        vm = new Vue({
            el: '#app',
            data: {
                editSalary: false,
                loading: false,
                exporting: false,//导出标志位
                dictParamField: false,
                searchForm: {
                    typeId: '',  //类型ID
                    stationName: '', // 岗位名
                    stationPlace: '', // 工作地
                    startTime: '', // 开始时间
                    endTime: '', // 结束时间
                    state: '', // 状态
                },
            },

            methods: {
                //重载表格
                toLoading: function () {
                    if (table == null) {
                        return;
                    }
                    var self = this;
                    self.loading = true;
                    table.reload('listTable', {
                        where: {
                            typeId: self.searchForm.typeId, //关键字
                            stationName: self.searchForm.stationName,
                            stationPlace: self.searchForm.stationPlace,
                            startTime: self.searchForm.startTime,
                            endTime: self.searchForm.endTime,
                            state: self.searchForm.state
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                ////  ----   单行操作界面显示  结束 -----------------
                init: function () {
                    var self = this;
                    //使用layerUI的表格组件
                    layui.use(['layer', 'table', 'ht_ajax', 'ht_auth', 'ht_config'], function () {
                        layer = layui.layer;
                        table = layui.table;
                        //执行渲染
                        var ht_config = layui.ht_config;
                        var $ = layui.jquery;
                   /*      var echarts = layui.echarts;
                        echarts/echarts */
                        var salaryInfoByMounthUrl = basePath+"rp/salaryInfoByMounth";
                        var workInfoByMounthUrl = basePath+"/rp/workInfoByMounth";
                        //salaryInfoByMounth();
                        //workInfoByMounth();
                        
                        function salaryInfoByMounth() {
                            $.ajax({
                                cache: true,
                                type: "POST",
                                url: salaryInfoByMounthUrl, // 数据接口
                                data: {},// 你的formid
                                async: false,
                                error: function (request) {
                                },
                                success: function (da) {
                                    salaryInfoByMounthBar(da);
                                }
                            });
                        }; 
                        
                        function salaryInfoByMounthBar(data) {
                            var dom = document.getElementById("workInfoByMounthDiv");
                            var myChart = echarts.init(dom);
                            myChart.showLoading();  
                            var option = null;
                            option = {
                            	color: ['#ff1c97'],
                           		title: {
                                       text: '工资统计'
                                 },
                                 toolbox: {
                                     feature: {
                                         magicType: {
                                             type: ['bar', 'line']
                                         },
                                         restore: {},
                                         dataView: {
                                        	 readOnly: false,
                                        	 optionToContent: function(opt) {
                                        		    var axisData = opt.xAxis[0].data;
                                        		    var series = opt.series;
                                        		    var table = '<table style="width:100%;text-align:center" class="layui-table" ><tbody><tr>'
                                        		                 + '<td>年份</td>'
                                        		                 + '<td>' + "月份" + '</td>'
                                        		                 + '</tr>';
                                    		         data.map(function (item) {
                                        		        table += '<tr>'
                                        		                 + '<td>' + item.年份 + '</td>'
                                        		                 + '<td>' + item.月份 + '</td>'
                                        		                 + '</tr>';
                                    		         });
                                        		    table += '</tbody></table>';
                                        		    return table;
                                        		}
                                         }
                                     }
                                 },
                                tooltip : {
                                    trigger: 'axis',
                                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis : [
                                    {
                                        type : 'category',
                                        data : data.map(function (item) {
                                            return item.月份;
                                        }),
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis : [
                                    {
                                    	name:'实发工资',
                                        type : 'value'
                                    },
                                    {
                                        name:'应交个税',
                                        type : 'value'
                                    }
                                ],
                                series : [
                                    {
                                        name:'实发工资',
                                        type:'bar',
                                        label:true,
                                        barWidth: '15%',
                                        data:data.map(function (item) {
                                            return item.实发工资;
                                        })
                                    },
                                    {
                                        name:'应缴个税',
                                        type:'bar',
                                        label:true,
                                        barWidth: '15%',
                                        data:data.map(function (item) {
                                            return item.应交个税;
                                        })
                                    }
                                ]
                            };
                            if (option && typeof option === "object") {
                                myChart.setOption(option, true);
                                myChart.hideLoading();  
                            }
                        }
                        
                        
                        function workInfoByMounth() {
                            $.ajax({
                                cache: true,
                                type: "POST",
                                url: workInfoByMounthUrl, // 数据接口
                                data: {},// 你的formid
                                async: false,
                                error: function (request) {
                                },
                                success: function (da) {
                                }
                            });
                        };
                      
                        
                    })
                },

                getStartTime: function (starttime) {
                    this.searchForm.startTime = starttime;
                },
                getEndTime: function (endtime) {
                    this.searchForm.endTime = endtime;
                }

            },
            mounted: function () {
                this.init();
            }
        });
    });
    //


</script>

</body>
</html>